<template>
  <el-container>
    <!-- 头 -->
    <el-header>
      <el-row>
        <!-- 左 -->
        <el-col :span="3"> 后台主页面 </el-col>
        <!-- 中 -->
        <el-col :span="15">
          <el-menu :default-active="'' + current" mode="horizontal">
            <el-menu-item
              :index="'' + k"
              @click="current = k"
              :class="{ active: k == current }"
              v-for="(v, k) in menus"
              :key="v.id"
            >
              <i :class="'el-icon-' + v.menu_icon"></i>
              <span slot="title">{{ v.title }}</span>
            </el-menu-item>
          </el-menu>
        </el-col>
        <!-- 右 -->
        <el-col :span="6">
          <el-button @click="logout">退出</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          :default-active="leftDefaultActive"
          :router="true"
          @open="menuOpend"
          :default-openeds="opened"
          :unique-opened="true"
          v-if="menus.length > 0"
        >
          <!-- 循环当前顶级菜单的子菜单 -->
          <template v-for="v in menus[current].children">
            <!-- 有三级菜单 -->
            <el-submenu v-if="v.children" :index="'' + v.id" :key="v.id">
              <template slot="title">
                <i :class="'el-icon-' + v.menu_icon"></i>
                <span>{{ v.title }}</span>
              </template>
              <!-- 三级菜单 -->
              <el-menu-item
                :index="'' + v1.id"
                :key="v1.id"
                v-for="v1 in v.children"
                :route="{ name: menus[current].menu_url + v1.menu_url }"
              >
                {{ v1.title }}
              </el-menu-item>
            </el-submenu>
            <!-- 没有三级菜单 -->
            <el-menu-item
              :index="'' + v.id"
              :key="v.id"
              v-else
              :route="{ name: menus[current].menu_url + v.menu_url }"
            >
              {{ v.title }}
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>
      <!-- 右侧 -->
      <el-main>
        <!-- 显示每个页面的标题 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item v-for="(v, k) in $route.meta.title" :key="k">{{
            v
          }}</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 每个子页面 -->
        <router-view
          style="padding:10px; height: calc(100vh - 120px); overflow: scroll"
        ></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { getMenus } from '../api'
export default {
  data() {
    return {
      menus: [],
      opened: [sessionStorage.getItem('openId') || ''], // 默认展开的二级菜单的ID
      current: sessionStorage.getItem('current') || 0 // 当前每几个是选中的
    }
  },
  computed: {
    leftDefaultActive() {
      const { menus, current } = this
      if (menus[current].children[0].children) {
        return '' + menus[current].children[0].children[0].id
      } else {
        return '' + menus[current].children[0].id
      }
    }
  },
  watch: {
    // 当 currnet 改变时函数就调用了 newValue改变之后的值
    current: function(newValue, oldValue) {
      sessionStorage.setItem('current', this.current)
      // sessionStorage.setItem('current', this.current)
      let name
      if (this.menus[newValue].children[0].children) {
        name =
          this.menus[newValue].menu_url +
          this.menus[newValue].children[0].children[0].menu_url
      } else {
        name =
          this.menus[newValue].menu_url +
          this.menus[newValue].children[0].menu_url
      }
      console.log(name)
      this.$router.push({
        name
      })
    }
  },
  methods: {
    logout() {
      // 退出
      // 1. 清空本地存储
      sessionStorage.clear()
      // 2. 清空 Vuex 中的数据
      this.$store.commit('set_user', null)
      // 3. 跳转到登录
      this.$router.push({ name: 'Login' })
    },
    // 当二级菜单展开时触发
    menuOpend(index) {
      sessionStorage.setItem('openId', index)
    }
  },
  created() {
    getMenus().then(res => {
      this.menus = res
    })
  }
}
</script>

<style lang="scss">
.menus {
  display: flex;
  justify-content: space-between;
}
.el-main {
  padding: 0;
}
.el-breadcrumb {
  border-bottom: 1px solid #ddd;
  height: 30px;
  line-height: 30px;
  padding-left: 20px;
}
.el-header {
  min-width: 1220px;
  background-color: #2b83f9;
  background-image: linear-gradient(143deg, #2945cb 20%, #2b83f9 81%, #3a9dff);

  .active {
    color: #f00;
  }

  .is-active {
    border-bottom-width: 5px !important;
    color: #fff !important;
    border-bottom-color: #33e4c2 !important;
  }
}
.el-menu {
  background-color: transparent;
}
.el-menu-item {
  color: #ccc !important;
  padding: 0;
  margin-right: 25px !important;
}
/* 鼠标放上 */
.el-menu-item:hover {
  background-color: transparent !important;
  color: #fff !important;
}

.active {
  background-color: transparent !important;
}
.el-header .el-menu {
  border-bottom: 0 !important;
}
.el-aside > .el-menu {
  /* 用窗口高度-顶部导航的高度 */
  height: calc(100vh - 60px);
}
</style>
